<script setup>
	const logisticData = ref([{
			icon: 'tabler-album',
			color: 'primary',
			title: '签订总数',
			value: 42,
			// change: 18.2,
			isHover: false,
			md: 3,
		},
		{
			icon: 'tabler-truck',
			color: 'success',
			title: '审批中',
			value: 8,
			// change: -8.7,
			isHover: false,
			md: 2,
		},
		{
			icon: 'tabler-access-point',
			color: 'warning',
			title: '履行中',
			value: 27,
			// change: 4.3,
			isHover: false,
			md: 2,
		},
		{
			icon: 'tabler-clock',
			color: 'info',
			title: '履行结束',
			value: 13,
			// change: -2.5,
			isHover: false,
			md: 2,
		},
		{
			icon: 'tabler-alert-triangle',
			color: 'error',
			title: '变更总数',
			value: 13,
			// change: -2.5,
			isHover: false,
			md: 3,
		},
	])
</script>

<template>
	<VRow>
		<VCol v-for="(data, index) in logisticData" :key="index" cols="12" :md="data.md" sm="6">
			<div>
				<VCard class="logistics-card-statistics cursor-pointer"
					:style="data.isHover ? `border-block-end-color: rgb(var(--v-theme-${data.color}))` : `border-block-end-color: rgba(var(--v-theme-${data.color}),0.38)`"
					@mouseenter="data.isHover = true" @mouseleave="data.isHover = false">
					<VCardText>
						<div class="d-flex align-center gap-x-4 mb-1">
							<VAvatar variant="tonal" :color="data.color" rounded>
								<VIcon :icon="data.icon" size="28" />
							</VAvatar>
							<h4 class="text-h4 weightBold">
								{{ data.value }}
							</h4>
						</div>
						<div class="text-body-1 mb-1 weightBold">
							{{ data.title }}
						</div>
						<!-- <div class="d-flex gap-x-2 align-center">
							<h6 class="text-h6">
								{{ (data.change > 0) ? '+' : '' }} {{ data.change }}%
							</h6>
							<div class="text-disabled">
								than last week
							</div>
						</div> -->
					</VCardText>
				</VCard>
			</div>
		</VCol>
	</VRow>
</template>

<style lang="scss" scoped>
	@use "@core/scss/base/mixins" as mixins;

	.logistics-card-statistics {
		border-block-end-style: solid;
		border-block-end-width: 2px;

		&:hover {
			border-block-end-width: 3px;
			margin-block-end: -1px;

			@include mixins.elevation(8);

			transition: all 0.1s ease-out;
		}
	}

	.skin--bordered {
		.logistics-card-statistics {
			border-block-end-width: 2px;

			&:hover {
				border-block-end-width: 3px;
				margin-block-end: -2px;
				transition: all 0.1s ease-out;
			}
		}
	}
	
	.weightBold {
		font-weight: bold;
	}
</style>